<template>
	<div>
		<div id="productIntroduction">
			<div class="div_title">
				<span class="title_left"></span>
				<span class="title_center">PRODUCTS</span>
				<span class="title_right"></span>
			</div>
			<div v-for="(item,index) in 4" id="color">
				<Row :key ="index" v-if="index%2===1">
					<Col span="4" offset="5" >
						<img src="../../../static/img/text_1.png">
					</Col>
					<Col span="8" offset="2" class="position">
						<div class="div_subHead">GS</div>
						<!-- <div class="div_margin"> -->
							<p class="p_setMinWidth">高水农商系统由移动互联网前端同学用jQuery打造的一套ERP企业管理系统
							</p>
							<div class="div_introduction">主要功能介绍：</div>
							<ul>
								<li>物流管理</li>
								<li>市场管理</li>
								<li>气调库管理</li>
								<li>基础信息</li>
								<li>基础设置</li>
							</ul>
						<!-- </div> -->
					</Col>
				</Row>
				<Row :key ="index" v-else>
					<Col span="5" offset="6" class="position_1">
						<div class="div_subHead">GS</div>
						<!-- <div class="div_margin"> -->
							<p class="p_setMinWidth">高水农商系统由移动互联网前端同学用jQuery打造的一套ERP企业管理系统
							</p>
							<div class="div_introduction">主要功能介绍：</div>
							<ul>
								<li>物流管理</li>
								<li>市场管理</li>
								<li>气调库管理</li>
								<li>基础信息</li>
								<li>基础设置</li>
							</ul>
						<!-- </div> -->
					</Col>
					<Col span="4" offset="2" >
						<img src="../../../static/img/text_1.png">
					</Col>
				</Row>
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
	export default{
		data(){
			return{

			}
		},
		created(){
		},
		methods:{

		},
	}
</script>
<style type="text/css" scoped>
	img{
		width: 400px;
		overflow:hidden;
    	background-position: center center;
    	background-repeat: no-repeat;
    	-webkit-background-size:cover;
    	-moz-background-size:cover;
    	background-size:cover;
	}
	/*标题*/
	.div_title{
		text-align: center;
		position: relative;
    	margin: 0.5em auto 1em;
	}
	.div_title .title_left{
		width: 150px;
    	height: 0;
    	border-top: 1px solid #ededed;
	}
	.div_title .title_center{
		font-size: 24px;
    	color: #999999;
    	padding: 6px 24px;
	    text-align: center;
	    background-color: #eee;
	    -moz-border-radius: 26px;
	    -webkit-border-radius: 26px;
	    border-radius: 26px;
	    margin: 0 13px;
	}
	.div_title .title_right{
		width: 150px;
		height:  0;
		border-top : 1px solid #ededed;
	}
	.div_title span{
		vertical-align: middle;
    	display: inline-block;
	}
	/*副标题*/
	.div_subHead{
		text-align: center;
		position: relative;
    	margin: 2em auto 1em;
    	font-size: 20px;
	}
	.div_margin{
		margin-top: 3em; 
	}
	.p_setMinWidth{
		max-width: 800px;
		display: inline-block;
		font-size: 18px;
		color: #4C4C4C;
	}
	.div_introduction{
		font-size: 16px;
		margin-top:2em; 
		margin-bottom: 0.5em;
		color: #808080;
	}
	li{
		font-size: 15px;
		color: #808080;
	}
	#color:nth-child(2n){
		background-color: #F6F7F8;
	}
	#color:nth-child(2n-1){
		background-color:#FFFEF9;
	}
	#color{
		min-width: 1024px;
	}
	.position{
		position: absolute;
		left: 700px;
	}
	@media screen and (max-width:1024px){
		.position{
			position: absolute;
			left: 600px;
		}
	}
	@media screen and (max-width: 1152px){
		.position{
			position: absolute;
			left: 600px;
		}
	}
</style>